<template>
  <div class="pos">
    <el-row>
      <!-- 所有未完成订单 -->
      <el-col :span="9" id="order-list">
        <!-- 搜索栏 -->
        <div class="list-search">
          <el-input placeholder="请输入订单号" v-model="orderID" @change="on_search"></el-input>
        </div>

        <!--        表格-->
        <div class="list-body">
          <el-table
              :data="order_list_data"
              :key="oid"
              style="width: 100%"
              max-height="550"
              stripe
              @row-click="showInfo"
          >
            <el-table-column prop="oid" label="订单号" align="center"></el-table-column>
            <el-table-column prop="time" label="下单时间" align="center"></el-table-column>
            <el-table-column prop="totalnum" label="商品数" align="center">
              <!--              <template #default="scope">-->
              <!--                {{order_list_data[scope.$index].prodectName.length}}-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="total" label="总金额" align="center"></el-table-column>
          </el-table>
          <el-pagination
              background
              :current-page="currentPage1"
              :page-size="pageSize1"
              :total="total1"
              layout="prev, pager, next"
              @current-change="handleCurrentChange1"
          />
          <div class="order-total">
            <p><span>未完成订单数：</span><span>{{ total1 }}单</span></p>
          </div>
        </div>
      </el-col>
      <!-- 详细信息 -->
      <el-col :span="15" id="vip-info">
        <div>
          <div class="info-wrapper">
            <div class="info-detail">
              <el-table
                  :data="displayedItems"
                  fit="true"
              >
                <el-table-column prop="name" label="商品" align="center"></el-table-column>
                <el-table-column prop="num" label="数量" align="center"></el-table-column>
                <el-table-column label="温度" align="center">
                  <template #default="scope">
                    {{iceList[displayedItems[scope.$index].ice]}}
                  </template>
                </el-table-column>
                <el-table-column label="糖度" align="center">
                  <template #default="scope">
                    {{sugarList[displayedItems[scope.$index].sugar]}}
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" align="center"></el-table-column>
              </el-table>
              <el-pagination
                  background
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <!-- 操作区域 -->
          <div class="buttons-wrapper">
            <el-button type="primary" size="large" @click="makeOver()">完成制作</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

let orderID = ref("")
let order_list_data = ref([])
// let totalNum = ref(order_list_data.value.length)
let infoData = ref([]) // 订单详细信息
let selecedId = 0 //选中的订单编号
const iceList = ["常温", "冰", "热"]
const sugarList = ["正常","七分","五分", "三分","无糖"]
// 分页1
let currentPage1 = 1;// 定义当前页码初始值为1
const pageSize1 = 8;// 定义每页显示的数据条数为5
let total1 = ref(0);// 初始化数据总条数
const handleCurrentChange1 = (newPage) => {
  currentPage1 = newPage
  // alert(currentPage1.value)
  getData()
}

//展示信息
const showInfo = (row) => {
  // alert("展示" + row.oid + "的详细信息")
  // infoData = order_list_data[index].prodectName
  axios.get('http://192.168.166.182:8080/orderForm/getMore', {
    params: {
      id: row.oid
    }
  })
      .then(res => {
        console.log(res.data)
        initInfoData(res.data,row.oid)
      })
      .catch(error => {
        console.error(error)
      });
}

// 分页
let currentPage = 1;// 定义当前页码初始值为1
const pageSize = 12;// 定义每页显示的数据条数为5
let total = ref(infoData.value.length);// 初始化数据总条数
let displayedItems = ref(infoData.value.slice(0, pageSize));//初始化当前页显示数据

function handleCurrentChange(newPage) {
  currentPage = newPage
  const startIndex = (newPage - 1) * pageSize
  displayedItems.value = infoData.value.slice(startIndex, startIndex + pageSize)
  // alert(total.value)
}

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

//获取当前页数据
const getData = () => {
  // alert(currentPage1)
  axios.get('http://192.168.166.182:8080/orderForm/ordering', {
    params:{
      pageNo:currentPage1,
      pageSize:pageSize1
    }
  })
      .then(res => {
        console.log(res.data)
        order_list_data.value = res.data.records
        console.log(order_list_data)
        total1.value = res.data.total
        // totalNum.value = res.data.total
      })
      .catch(error => {
        console.error(error);
      });
}

//搜索
const on_search = () =>{
  // alert("展示搜索信息")
  initInfoData([],0)
  if(orderID.value===''){
    getData()
  } else {
    const oid = parseInt(orderID.value)
    // alert(oid)
    // alert(orderID.value)
    axios.get(`http://192.168.166.182:8080/orderForm/getOrder/${oid}`)
        .then(res => {
          console.log(res.data)
          // order_list_data = ref([])
          order_list_data.value = res.data
          total1.value = order_list_data.value.length
          // totalNum = ref(order_list_data.value.length)
        })
        .catch(error => {
          console.error(error)
        });
  }
}

//完成制作
const makeOver = () => {
  // alert("完成订单" + selecedId + "的制作")
  axios.post(`http://192.168.166.182:8080/orderForm/changeStatue/${selecedId}`)
      .then(response => {
        // 处理成功响应
        ElMessage({type: 'success', message: '修改成功!'})
        // 重新获取数据，更新表格显示
        getData()
        initInfoData([],0)
      })
      .catch(error => {
        // 处理错误
        console.error('用户更新失败');
        console.error(error);
      });
}

const initInfoData = (data,x) => {
  infoData.value = data
  console.log(infoData.value)
  total = infoData.value.length
  selecedId = x
  handleCurrentChange(1)
}

</script>

<style scoped>

#order-list {
  height: 100vh;
  background-color: #d9ecff;
  /*background-color: #fff7f7;*/
}

#vip-info {
  height: 100vh;
  background-color: #ecf5ff;
  /*background-color: #fadddd;*/
}

/*原来*/
.placeholderClass /deep/ .el-input__inner::-webkit-input-placeholder {
  color: #337ecc;
  font-size: 14px;
  opacity: 0.6;
}

/*自定义css*/
.vip .vip-wrapper #order-list {
  padding: 10px;
  box-sizing: border-box;
}

.vip .vip-wrapper #order-list .options-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.vip .vip-wrapper #vip-info {
  background-color: rgb(228, 233, 236);
  position: relative;
}

/*搜索栏*/
.list-search /deep/ .el-input {
  width: 100%;
}

.list-search /deep/ .el-input__inner {
  height: 30px;
}

.list-search {
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px;
}

.search-result {
  margin-top: 5px;
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
}

.search-result .result-list .result-item {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
}


/*表格*/
.list-body {
  margin: 20px;
}

.order-total {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1rem;
}

.order-total p {
  margin-right: 30px;
}

.order-total p :last-child {
  font-weight: 600;
  font-size: 1.2rem;
  color: #337ecc;
}


/*信息*/
.info-wrapper {
  width: 32rem;
  height: 38rem;
  margin: 3rem auto 0;
  text-align: center;
  border-radius: 5%;
  border: 1px solid transparent;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
}

.info-wrapper .info-detail {
  width: 80%;
  margin: 10px auto 0;
  text-align: left;
}

.el-pagination { /*选择分页组件，默认采取Flex布局*/
  justify-content: center; /*水平方向居中对齐*/
  margin-top: 8px;
}

.buttons-wrapper {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
}
</style>
